<template>
  <div class="boss-category">
    <el-row>
      <el-col :span="6">
        <el-table :data="categoryData.cate1" height="750" stripe highlight-current-row @row-click="onCate1Click" v-loading="loading">
          <el-table-column prop="catName" label="一级分类">
            <template #default="scope">
              <div class="cate-name">
                <span>{{ scope.row.catName }}</span>
                <el-icon><ArrowRight /></el-icon>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="6">
        <el-table :data="categoryData.cate2" height="750" stripe highlight-current-row @row-click="onCate2Click" v-loading="loading" :cell-class-name="tableCellClassName">
          <el-table-column prop="catName" label="二级分类">
            <template #default="scope">
              <div class="cate-name">
                <span>{{ scope.row.catName }}</span>
                <el-icon><ArrowRight /></el-icon>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-col>

      <el-col :span="6">
        <el-table :data="categoryData.cate3" height="750" stripe highlight-current-row v-loading="loading" :cell-class-name="tableCellClassName">
          <el-table-column prop="catName" label="三级分类">
            <template #default="scope">
              <div class="check-cate">
                <el-checkbox-group v-model="categoryData.selectedCate" @change="onThirdCateChange">
                  <el-checkbox :label="`${scope.row.catId}@${scope.row.catName}`" :key="`${scope.row.catId}@${scope.row.catName}`">
                    <span> {{ scope.row.catName }}</span>
                  </el-checkbox>
                </el-checkbox-group>
                <span class="goods-count">
                  {{ scope.row.goodsCount }}
                </span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-col>

      <el-col :span="6">
        <el-table :data="selectCates" height="750" stripe highlight-current-row v-loading="loading" :cell-class-name="tableCellClassName">
          <el-table-column>
            <template #header>
              <div class="selected-cate-header">
                <span class="title">{{ '已选' + selectCates.length + '项' }}</span>
                <span class="empty-btn" @click="onEmptyClick">清空</span>
              </div>
            </template>
            <template #default="scope">
              <div class="selected-cate">
                <span> {{ scope.row.catName }}</span>
                <el-icon @click="onDeleteClick(scope.$index, scope.row.catId)"><CircleClose /></el-icon>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import { nextTick, reactive, ref, onMounted, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowRight, CircleClose } from '@element-plus/icons-vue'
import api from '@/api'
import consts from '@/consts'
import Link from '@/components/button/link.vue'

const emit = defineEmits(['change'])

const route = useRoute()
const router = useRouter()

const categoryData = reactive({
  cate1: [],
  cate2: [],
  cate3: [],
  selectedCate: []
})

const loading = ref(false)

const selectCates = computed(() => {
  return categoryData.selectedCate.map((e) => {
    const ss = e.split('@')
    return { catId: ss[0], catName: ss[1] }
  })
})

const loadData = async (parId, catName, level, callback) => {
  loading.value = true
  let { data, err } = await api.get(`/medinstrument/boss/goodsCategory/getCategory?parId=${parId}&catName=${catName}&level=${level}`)
  loading.value = false
  if (err) {
    ElMessage.error(err)
  } else {
    callback(data.list)
  }
}

const onCate1Click = (row) => {
  loadData(row.catId, '', 2, (data) => (categoryData.cate2 = data))
}

const onCate2Click = (row) => {
  loadData(row.catId, '', 3, (data) => (categoryData.cate3 = data))
}

const onEmptyClick = () => {
  categoryData.selectedCate = []
}
const onDeleteClick = (catId) => {
  categoryData.selectedCate.splice(catId, 1)
}

const tableCellClassName = ({ column, columnIndex }) => {
  if (column.property === 'goodsCount') return 'tags'
}

const onThirdCateChange = () => {
  emit('change', selectCates.value)
}

onMounted(() => {
  loadData(0, '', 1, (data) => (categoryData.cate1 = data))
})
</script>
<style lang="scss" scoped>
.boss-category {
  padding: 20px;

  .selected-cate,
  .cate-name,
  .check-cate,
  .selected-cate-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .selected-cate-header {
    .title {
      padding-left: 10px;
    }

    .empty-btn {
      padding-right: 10px;
      color: #e47470;
    }
  }
}
</style>
<style scoped>
.boss-category,
.boss-category .el-row,
.boss-category .el-table {
  height: 100%;
}

.boss-category:deep() .el-table__body tr.current-row > td,
.boss-category:deep() .el-table__body tr.el-table__row--striped.current-row > td {
  background-color: #e4e7ed;
}

.boss-category:deep() .cate1-table .el-table__header .cell {
  padding: 0 10px;
}

.boss-category:deep() .el-table__header {
  height: 48px;
  background-color: #f4f4f5;
  color: #909399;
}

.boss-category:deep() .el-table__header col {
  width: 0;
}

.boss-category:deep() .el-table__header .cell {
  padding: 0;
}

.boss-category:deep() .el-table__header col:first-child {
  width: 100%;
}

.boss-category:deep() .el-table__header .has-gutter tr,
.boss-category:deep() .el-table__header .is-leaf {
  background-color: #fafafa;
}

.boss-category:deep() .el-table td,
.boss-category:deep().el-table th.is-leaf {
  border-bottom: 1px solid #dcdfe6;
}

.boss-category .query {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding: 10px 10px 0 10px;
  border-top: 1px solid #dcdfe6;
}

:deep(.el-table__row) .tags {
  display: inline-block;
  padding: 0 6px;
  font-size: 12px;
  background-color: #409eff;
  border-radius: 8px;
  color: #fff;
}

.goods-count {
  padding: 0 6px;
  background-color: #409eff;
  border-radius: 8px;
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  margin-left: 8px;
}

.boss-category:deep() .el-col {
  border: 1px solid #dcdfe6;
  background: #fff;
}

.boss-category:deep() .el-col:nth-child(2) {
  border-left: 0;
  border-right: 0;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.icon {
  position: absolute;
  right: 5px;
  top: 16px;
}
</style>
